<template>
	<view class="index-list animated fadeInLeft fast">
		<view class="flex-between">
			<view class="flex align-item index-list-header-img">
				<image :src="item.userpic"></image>
				<text class="ml10 color-999-size-14">{{ item.username }}</text>
			</view>
			<view class="flex align-item">
				<view class="flex align-item">
					<view class="index-list-icon align-item" v-show="!isguanzhu" @tap="noticeTap">
						<text class="icon iconfont icon-zengjia"></text>
						<text class="ml5">关注</text>
					</view>
				</view>
				<!-- <view class="icon iconfont icon-guanbi ml10"></view> -->
			</view>
		</view>
		<view class="mt15 color-333-size-18" @tap="goDetailTap">
			{{ item.title }}
		</view>
		<view class="mt10 list-img flex-column-center" @tap="goDetailTap">
			<!-- 图片 -->
			<image :src="item.titlepic" mode="widthFix" lazy-load="true"></image>
			<!-- 视频 -->
			<template v-if="item.type == 'video'">
				<view class="index-list-play icon iconfont icon-bofang"></view>
				<view class="index-list-playinfo">
					{{ item.playNum }}次播放{{ item.long }}
				</view>
			</template>
		</view>
		<view class="mt5 flex-between index-list-icon4">
			<view class="flex">
				<view class="flex align-item" :class="{ 'active': (infonum.index == 1) }" @tap="handleTap('ding')">
					<view class="icon iconfont icon-icon_xiaolian-mian"></view>
					<text class="ml5">{{ infonum.dingNum }}</text>
				</view>
				<view class="flex align-item" :class="{ 'active': infonum.index == 2 }" @tap="handleTap('cai')">
					<view class="icon iconfont icon-kulian ml15"></view>
					<text class="ml5">{{ infonum.caiNum }}</text>
				</view>
			</view>
			<view class="flex">
				<view class="icon iconfont icon-pinglun1"></view>
				<text class="ml5">{{ item.commentNum }}</text>
				<view class="icon iconfont icon-zhuanfa ml15"></view>
				<text class="ml5">{{ item.shareNum }}</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			item: Object,
			index: Number
		},
		data() {
			return {
				isguanzhu: this.item.isguanzhu,
				infonum: this.item.infonum
			}
		},
		methods: {
			noticeTap() { // 关注事件
				this.isguanzhu = true
				console.log(this.isguanzhu)
				uni.showToast({
					title: '关注成功'
				})
			},
			handleTap(type) { // 顶踩事件
				switch (type) {
					case 'ding': // 判断点击事件的index原先处于什么状态， 0：代表没有， 1：代表顶过， 2：代表踩过
						if(this.infonum.index == 1) {
							return
						} else if(this.infonum.index == 2) {
							this.infonum.dingNum ++
							this.infonum.caiNum --
							this.infonum.index = 1
						} else {
							this.infonum.dingNum ++
							this.infonum.index = 1
						}
						break
					case 'cai':
						if(this.infonum.index == 2) {
							return
						} else if(this.infonum.index == 1) {
							this.infonum.dingNum --
							this.infonum.caiNum ++
							this.infonum.index = 2
						} else {
							this.infonum.caiNum ++
							this.infonum.index = 2
						}
						break
				}
			},
			goDetailTap() {
				console.log()
			}
		}
	}
</script>

<style lang="scss" scoped>
	.index-list{
		border-bottom: 1upx solid #EEEEEE;
		padding: 20upx;
		&:last-child {
			// border-bottom:none
		}
		// 用户头像
		.index-list-header-img{
			height: auto;
			&> image{
				width: 90upx;
				height: 90upx;
				border-radius: 50%;
			}
		}
		// 关注
		.index-list-icon{
			padding: 5upx 15upx 5upx 10upx;
			background-color: #F4F4F4;
			.icon-zengjia {
				font-size: 28upx;
			}
		}
		// 标题图片
		.list-img{
			position: relative;
			image {
				width: 100%;
				border-radius: 20upx;
			}
		}
		// video
		.index-list-play,
		.index-list-playinfo{
			position: absolute;
			color: #FFFFFF;
		}
		.index-list-play{
			font-size: 120upx;
		}
		.index-list-playinfo{
			background-color: rgba(51, 51, 51, .7);
			bottom: 8upx;
			right: 8upx;
			border-radius: 40upx;
			font-size: 25upx;
			padding: 10upx 15upx;
		}
		// 关闭图标
		.icon-guanbi{
			font-size: 24upx;
			color: #CCCCCC;
		}
		// 顶，踩，评论，分享
		.index-list-icon4{
			view {
				color: #999999;
			}
			.active {
				view,
				text{
					color: #FEE42A;
				}
			}
		}
	}
	
</style>
